<template>
  <div
    class="FallingItem"
    :style="{
      ...fallingInfo,
      left,
      animationDuration
    }"
    ref="Falling"
    id="Falling"
  ></div>
</template>

<script>
let clientWidth = document.documentElement.clientWidth - 50;
let clientHeight = document.documentElement.clientHeight;
export default {
  name: "",
  props: {
    //掉落物数据
    fallingInfo: {
      type: Object,
      default: () => {}
    },
    //掉落物索引
    id: {
      type: Number
    },
    //接收对象
    recipient: {},
    //删除掉落物
    delFalling: {
      type: Function,
      default: () => new Function()
    },
    //掉落物参数
    FallingConfig: {
      type: Object,
      default: () => {}
    },
    //计算分数
    calculateScore: {
      type: Function,
      default: () => new Function()
    }
  },
  data() {
    return {
      left: parseInt(Math.random() * (clientWidth - 10 + 1) + 10, 10) + "px",
      animationDuration:
        Math.floor(
          Math.random() *
            (this.FallingConfig.maxFallingTime -
              this.FallingConfig.minFallingTime) +
            this.FallingConfig.minFallingTime
        ) + "s",
      timer: "" //实时监测是否碰撞定时器
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.timer = setInterval(() => {
        let res = this.collision(this.$refs.Falling, this.recipient);
        if (res) {
          //如果碰撞了,清除掉落物，增减分数
          window.clearInterval(this.timer);
          this.$emit("calculateScore", {
            type: this.fallingInfo.type,
            score: this.fallingInfo.score
          });
          this.$emit("delFalling", this.id);
          return;
        }
        //没有碰撞，检测是不是到了最底部，
        if (this.$refs.Falling.offsetTop >= clientHeight) {
          window.clearInterval(this.timer);
          this.$emit("delFalling", this.id);
          return;
        }
      }, 100);
    });
  },
  methods: {
    getRect(obj) {
      return obj.getBoundingClientRect();
    },
    //判断是否发生碰撞
    collision(obj1, obj2) {
      var obj1Rect = this.getRect(obj1);
      var obj2Rect = this.getRect(obj2);
      //如果obj1碰上了哦obj2返回true，否则放回false
      var obj1Left = obj1Rect.left;
      var obj1Right = obj1Rect.right;
      var obj1Top = obj1Rect.top;
      var obj1Bottom = obj1Rect.bottom;
      var obj2Left = obj2Rect.left;
      var obj2Right = obj2Rect.right;
      var obj2Top = obj2Rect.top;
      var obj2Bottom = obj2Rect.bottom;
      if (
        obj1Right < obj2Left ||
        obj1Left > obj2Right ||
        obj1Bottom < obj2Top ||
        obj1Top > obj2Bottom
      ) {
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>

<style scoped lang="less">
.FallingItem {
  position: fixed;
  background: red;
  top: -30px;
  -webkit-animation-name: moving;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-iteration-count: 1; /* 设置动画的播放次数 */
  animation-name: moving;
  animation-timing-function: linear;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes moving {
  0% {
    top: -30px;
  }
  100% {
    top: 100vh;
  }
}
</style>
